<template>
  <div class="t-flow">
    <div class="t-flow-head">
      <h5>面试题速记流量曲线</h5>
      <el-link @click="handleGoMore">更多</el-link>
    </div>
    <div class="t-flow-content">
      <div ref="chartDom" style="width: 100%; height: 400px"></div>
    </div>
  </div>
</template>

<script setup name="AppFlow">
import * as echarts from 'echarts';

import {listAllReportAppFlow} from "@/api/report/reportAppFlow";
import { getDicts } from '@/api/system/dict/data'
import {useRouter} from "vue-router";

const { proxy } = getCurrentInstance();

const router = useRouter();

const chartDom = ref(null);
let myChart = null;
const options = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: [],
    top: '20'
  },
  grid: {
    top: '20%',
    left: '10%',
    bottom: '10%',
    right: '10%',
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: []
});

// 处理数据
const handleChartOptions = (maps) => {
  // 获取坐标列表
  const xList = [];
  for (let key in maps) {
    xList.push(key);
  }
  options.value.xAxis.data = xList;
  // 初始化数据
  const seriesList = [];
  // 查询字典
  getDicts("app_log_bus").then(res => {
    options.value.legend.data = [];

    res.data.forEach(item => {
      // 图例
      options.value.legend.data.push(item.dictLabel);
      // 数据
      const sit = {
        type: 'bar',
        name: item.dictLabel,
        data: []
      }
      // 循环处理数据
      xList.forEach(day => {
        const arr = maps[day];
        if (arr && arr.length > 0) {
          const matchData = arr.filter(flowItem => flowItem.busKey === item.dictValue);
          if (matchData && matchData.length > 0) {
            sit.data.push(matchData[0].visitCount);
          } else {
            sit.data.push(0);
          }
        } else {
          sit.data.push(0);
        }
      });
      // 保存单项
      seriesList.push(sit);
    });
    // 保存数据
    options.value.series = seriesList;
    // 渲染图形
    initChart();
  });
}

// 查询数据
const queryData = () => {
  listAllReportAppFlow().then(res => {
    if (res.code === 200) {
      // 处理数据
      handleChartOptions(res.data);
    }
  })
}

const initChart = () => {
  myChart = echarts.init(chartDom.value);
  myChart.setOption(options.value);
}

const handleGoMore = () => {
  router.push({
    path: '/report/reportAppFlow'
  })
}

// 初始化饼图
onMounted(() => {
  nextTick(() => {
    queryData();
  })
})

</script>

<style scoped lang="scss">
.t-flow {
  background-color: #ffffff;
  border-radius: 8px;

  &-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    > h5 {
      margin: 0;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.8);

    }
  }

  &-content {
    display: flex;
    flex-flow: wrap;


  }
}
</style>

